//审核详情页
<template>
<div>
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content">
        <div class="swipe-div">
            <mt-swipe :auto="0">
                <mt-swipe-item class="slide1" v-for="(img, index) in imgList" :key="index">
                    <a href="javascript: void(0)">
                        <img :src="img" preview="0"/>
                    </a>
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="audit-details">
            <ul>
                <li>
                    <p class="audit-details-title">样衣编号:</p>
                    <p class="audit-details-conts">{{ data.sampleId }}</p>
                </li>
                <li>
                    <p class="audit-details-title">大类:</p>
                    <p class="audit-details-conts">{{ data.dlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">货号:</p>
                    <p class="audit-details-conts">{{ data.pcode }}</p>
                </li>
                <li>
                    <p class="audit-details-title">小类:</p>
                    <p class="audit-details-conts">{{ data.xlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">波段号:</p>
                    <p class="audit-details-conts">{{ data.bandname }}</p>
                </li>
                <li>
                    <p class="audit-details-title">合作方式:</p>
                    <p class="audit-details-conts">{{ data.jyfs }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商编码:</p>
                    <p class="audit-details-conts">{{ data.supplierid }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商:</p>
                    <p class="audit-details-conts">{{ data.vendername }}</p>
                </li>
            </ul>
        </div>
        <div class="audit-regula">
            <div class="audit-regula-title">
                <h1>打分项目</h1>
                <label class="decision-details-label decision-details-zong oneScore-details-zong oneDecision-zong">总分值</label>
                <label class="decision-details-label decision-details-zong oneScore-details-zong oneDecision-person">总人数</label>
                <label class="decision-details-label decision-details-zong oneScore-details-zong  oneDecision-ping">平均分</label>
            </div>
            <div class="audit-regula-cont oneScore-cont">
                <ul>
                    <li v-for="(item, index) in scoreList" :key="index">
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label>{{ item.scorename }}</label>
                            <label class="decision-details-label oneDecision-zong">{{ item.value }}</label>
                            <label class="decision-details-label oneDecision-person">{{ item.persum }}</label>
                            <label class="decision-details-label oneDecision-ping">{{ item.valueavg }}</label>
                        </div>
                    </li>
                    <li>
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label style="font-weight: bold">总分</label>
                            <label class="decision-details-label oneDecision-zong">{{ total.vtotal }}</label>
                            <label class="decision-details-label oneDecision-person">{{ total.persumtotal }}</label>
                            <label class="decision-details-label oneDecision-ping">{{ total.avgtotal }}</label>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="audit-regula">
            <div class="audit-regula-title">
                <h1>角色打分</h1>
                <label class="decision-details-label decision-details-zong oneScore-details-zong">分值(单位:分)</label>
            </div>
            <div class="audit-regula-cont oneScore-cont">
                <ul>
                    <li v-for="(score, i) in roleScoreList" :key="i">
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label>{{ score.rolename }}</label>
                            <label class="decision-details-label">{{ score.VALUE }}</label>
                        </div>
                    </li>
                    <li>
                        <div class="mui-input-row mui-checkbox decision-details-box oneDecision-last">
                            <label>平均分</label>
                            <label class="decision-details-label">{{ total.avgtotal }}</label>
                            <!--<input class="audit-details-check" name="checkbox1" value="Item 1" type="checkbox">-->
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="audit-regula" style="padding-bottom: 4rem;">
            <div class="audit-regula-title">
                <h1>状态选择</h1>
            </div>
            <div class="audit-regula-cont oneScore-cont" style="margin-bottom: 4.8rem;">
                <ul>
                    <li v-for="(check, j) in changeList" :key="j">
                        <div class="mui-input-row mui-checkbox audit-details-box">
                            <label>{{ check.text }}</label>
                            <input class="audit-details-check" name="checkbox1" :checked="check.checked" :value="check.value" type="checkbox" @change="change(j)">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="audit-button">
            <ul>
                <li class="audit-sure oneScore-sure">
                    <button type="button" class="mui-btn mui-btn-blue" @click="submit">提交决策</button>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import commonHeader from '@/components/commonHeader.vue'
import { Swipe, SwipeItem } from 'mint-ui';
import API from '@/service/api'
export default {
    components: { commonHeader, Swipe, SwipeItem },
    data() {
        return {
            title: '一审决策',
            data: {},
            imgList: [],
            scoreList: [],
            roleScoreList: [],
            changeList: [
                {id: 1, value: 1, text: '备选', checked: true },
                {id: 2, value: 2, text: '通过', checked: false },      
                {id: 3, value: 3, text: '淘汰', checked: false },
                {id: 4, value: 4, text: '复版', checked: false }
            ],
        }
    },
    computed: {
        ...mapState( [ 'sample_id', 'sample_no' ] ),
        total() {
            let param = {
                vtotal: 0,
                persumtotal: 0,
                avgtotal: 0
            }
            this.scoreList.forEach(element => {
                param.vtotal+=element.value
                param.persumtotal = element.persum
                param.avgtotal+=element.valueavg
            })
            return param
        }
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING' ] ),
        add(i) {
            if(this.scoreList[i].value<10) this.scoreList[i].value+=5
        },
        change(index) {
            this.changeList.forEach(item=> {
                item.checked = false
            })
            this.changeList[index].checked = !this.changeList[index].checked
        },
        reduce(i) {
            if(this.scoreList[i].value>0) this.scoreList[i].value-=5
        },
        async initialization() {
            //获取基本信息
            this.data = await API.currency.getSampleDetail({ ID: this.sample_no })
            //获取样衣图片列表
            let imgs = await API.currency.getSampleImgs({ sampleId: this.sample_id })
            for(let i = 1; i<6; i++) {
                const img = imgs[`limg${i}`]
                if(img) this.imgList.push(img)
            }
            //启动图片预览
            this.$previewRefresh()
            API.oneresolve.getScoreList({ sampleId: this.sample_id }).then(scores=> {
                this.scoreList = scores
            })
            API.oneresolve.getRoleScoreList({ sampleId: this.sample_id }).then(scores=> {
                this.roleScoreList = scores
            })
            this.UPDATE_SHOW_LOADING(false)
        },
        submit(status) {
            this.UPDATE_SHOW_LOADING(true)
            let flag = this.changeList.filter(item=> {
                return item.checked
            })[0].value
            API.oneresolve.submit({ sampleId: this.sample_id, flag: flag }).then(res=> {
                this.handle(res)
            })
        },
        handle(res) {
            this.UPDATE_SHOW_LOADING(false)
            if(res.code == 1) {
                this.$success()
                setTimeout(()=>{
                    this.$router.push( { name: 'oneresolve' } )
                },1000)
            }else {
                this.$error(res.errMsg)
            }
        }
    },
    created() {
       this.initialization()
    } 
}
</script>
<style lang="less" scoped>
.audit-button{
    .mui-btn-yellow {
        background-color: #ffaf00 !important;
        color: #ffffff
    }
}
</style>